<template>
  <view class="main">
    <div class="details">
      <Editor
        :value="content"
        :plugins="plugins"
        @change="handleChange"
        :locale="zhHans"
        :upload-images="handleUploadImages"
      />
    </div>
    <!-- <input type="file" id="fileInput" @change="aa" /> -->
  </view>
</template>

<script setup lang="ts">
import { Editor } from '@bytemd/vue-next'
//   import 'juejin-markdown-themes/dist/juejin.min.css'
import 'bytemd/dist/index.css'
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import zhHans from 'bytemd/locales/zh_Hans.json'
import gemoji from '@bytemd/plugin-gemoji'
import mediumZoom from '@bytemd/plugin-medium-zoom'
import { request } from '../utils/request'
import{ref} from 'vue'

let content = ref('')
const handleChange = (v: string) => {
  content.value = v
}
//添加的插件
const plugins = [
  gfm(),
  highlight(),
  gemoji(),
  mediumZoom()
]


//上传图片
const handleUploadImages = async(files: File[]) => {
  let imgs: any= []
  const item = files[0]
  let formData = new FormData();
  formData.append('file', item)
  await uploadFile(formData).then(url => {
    imgs.push({url})
  })
  return imgs
}

function uploadFile(formData: FormData) {
  return new Promise((resolve, reject) => {
    // const formData = new FormData();
    // formData.append('file', file);

    // console.info(formData)
    // debugger
     request({
      url: "/api/blog/upload",
      method: "post",
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(r => {
      resolve("http://192.168.101.200:9000/" + r.fileName)
    }).catch(e => {
      reject(e)
    })
  });

}
</script>

<style scoped></style>
